<template>
    <div class="form-area">
        <div class="input" @click="showPicker">
            <cube-input
                    v-model="value"
                    :disabled="true"
                    placeholder="请选择区域"
            >
            </cube-input>
        </div>

    </div>
</template>

<script>
import {provinceList,cityList,areaList} from "@/util/area.js"
for(let item in areaList){
    if(areaList[item][0] && areaList[item][0].text === "市辖区"){
        areaList[item].shift();
    }
}
export default {
    name: "form-area",
    data() {
        return {
            picker: null  //选择器对象
        }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      // 地址区域级别
      level: {
          type: Number,
          default: 2
      },
      // 值
      value: {
          type: String,
          value: ''
      }
    },
    watch: {
      level() {
        let setData = this.createAddressData()
        this.picker.setData(setData.address_data,setData.selected_data)
      }
    },
    created() {
        this.createPicker()
    },
    methods: {
        showPicker() {
            console.log('test')
            this.picker.show()
        },
        /**
         * 创建选择器所需数据结构
         */
        createAddressData() {
            let selected = this.value.split('/')
            let address_data = []
            let selected_data = [0,0,0]
            provinceList.forEach((item,index) => {
                if(selected[0] === item.text) {
                    selected_data[0] = index
                }
                address_data.push({text:item.text,value:item.value})
            })
            if (this.level === 2) {
                address_data.forEach((province)=>{
                    let city = cityList[province.value]
                    let children = []
                    city.forEach((city_item,city_index) => {
                        if(selected[1] === city_item.text) {
                            selected_data[1] = city_index
                        }
                        children.push({text:city_item.text,value:city_item.value})
                    })
                    province.children = children
                })
            } else if(this.level === 3){
                address_data.forEach((province_item)=>{
                    let city = cityList[province_item.value]
                    let province_children = []
                    city.forEach((city_item,city_index) => {
                        if(selected[1] === city_item.text) {
                            selected_data[1] = city_index
                        }
                        province_children.push({text:city_item.text,value:city_item.value})
                    })
                    province_item.children = province_children
                    province_item.children.forEach((city_item) => {
                        let town = areaList[city_item.value]
                        let city_children = []
                        town.forEach((town_item,town_index) => {
                            if(selected[2] === town_item.text) {
                                selected_data[2] = town_index
                            }
                            city_children.push({text:town_item.text,value:town_item.value})
                        })
                        city_item.children = areaList[city_item.value];
                    })
                })
            }
            return {address_data,selected_data}
        },
        /**
         * 创建选择器
         */
        createPicker() {
            if(this.picker === null) {
                let setData = this.createAddressData()
                this.picker = this.$createCascadePicker({
                    title: '选择区域',
                    zIndex: 100000,
                    onSelect:(res,res2,res3)=>{
                        let value = res3.join('/')
                        this.$emit("change",value);
                    }
                });
                this.picker.setData(setData.address_data,setData.selected_data)
            }
        }
    }
}
</script>

<style scoped lang="less">

</style>
